<template>
<!--  下拉框-时间-输入框-按钮 控件 -->
  <a-input-group  class="check-form" compact>
    <a-select
        ref="select"
        v-model:value="self.type"
        style="width: 120px"
        @change="handleChange"
    >
      <a-select-option v-for="item in self.option" :key="item.key" :value="item.id">{{ item.label }}</a-select-option>
    </a-select>
    <a-range-picker
        style="width: 250px"
        v-show="self.type==4"
        v-model:value="self.times"
        :ranges="self.ranges"
        :locale="self.locale"
        format="YYYY/MM/DD">
      <template #suffixIcon>
        <CalendarOutlined/>
      </template>
    </a-range-picker>
    <a-input  v-show="self.type!=4" ref="input"  style="width: 250px" v-model:value="self.inputVal" :placeholder="self.placeholder" allowClear/>
    <a-button style="margin-left: 1px"  @click="findData">
      <SearchOutlined />
    </a-button>
  </a-input-group>

</template>
<script setup lang="ts">
import moment, {Moment} from 'moment';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {ref, reactive, watch} from 'vue';
import { useStore } from 'vuex'
const store = useStore()
// 监听右侧栏的时间值（vuex） 用于改变搜索栏的时间
watch(() =>store.state.date,(newValue)=> {
  if (newValue){
    self.type = 4
    self.times = [moment(newValue),moment(newValue)]
  }
})
const self = reactive({
  locale,
  option: [
    {
      key: 1,
      label: '全文'
    },
    {
      key: 2,
      label: '标题'
    },
    {
      key: 3,
      label: '标签'
    },
    {
      key: 4,
      label: '日期'
    },
  ],
  placeholder: ref('全文关键字'),
  type: ref(1),
  inputVal: ref(),
  times: ref<Moment[]>([]),
  ranges: {'今天': [moment(), moment()], '本月': [moment(), moment().endOf('month')]},
})

let input = ref()
// 下拉框框发生变化
const handleChange = (value:any) => {
  if (value!=4){
    self.times =<Moment[]>([])
    self.placeholder = self.option[value -1].label + '关键字'
    input.value.focus()
  }else {
    self.inputVal = ''
  }
};
// 时间选择器
const timeChange = (value:any) => {
  // console.log(`timeChange ${value}`);
  console.log(moment( value[0]).format('YYYY/MM/DD'))
  console.log(moment( value[1]).format('YYYY/MM/DD'))
}
// 清除
const clearVal = ()=> {
  self.type = 1
  self.times = []
  self.inputVal.value = ''
}
//查询数据
const findData = () => {
  if (self.type != 4){
    //根据关键字和类型查询
    let obj = {
      key:self.inputVal,
      type:self.type
    }
    getData(obj)
  }else {
    //根据时间和类型查询
    let startTime = moment( self.times[0]).format('YYYY/MM/DD')
    let endTime = moment( self.times[1]).format('YYYY/MM/DD')
    let obj = {
      startTime,
      endTime,
      type:self.type
    }
    getData(obj)
  }
}
// getData
const getData = (obj:object) => {
  console.log(obj,'开始查询')
}
defineExpose({
  clearVal
})
</script>
<style>
.ant-calendar-range-quick-selector {
  cursor: pointer;
}
.check-form{
  width: 100%;
  padding: 0 15px;
  display: flex !important;
  justify-content: flex-end;
}
</style>

